<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件命令方式</title>
</head>
<body>
    <div id="app">
        <!-- 第三步:使用注册好的组件 -->
        <my-cpn></my-cpn>
        <yy></yy>
        <com-s-s></com-s-s>
        <my-com></my-com>
    </div>
    		<!-- 
			创建组件的步骤：
				1、创建组件构造器
				2、注册组件（全局注册组件、局部注册组件）
				3、使用注册好的组件
		 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>

        /* 第一步创建组件构造器 */
        var myCpn = Vue.extend({
            template:`
                <div>
                    <h2>这是一个组件构造器创建的</h2>
                </div>`
        });
        /* 第二步 注册全局组件 */
        Vue.component('my-cpn',myCpn);

        var myCom = {
            //创建对象
            template:
                `<div>
                    <h2>这是局部组件</h2>    
                </div>
                `   
        }
        new Vue({
            el:'#app',
            /* 注册局部组件 */
            components:{
                //组件别名
                yy:myCpn,
                // 在定义组件名称的时候，不能使用 '-',这个是标识符命名规范，如果要使用就要加 引号""
                "com-s-s":myCom,
                //局部组件
                // 当属性和值名称一样的时候，可以简写
                myCom
            }
        })

    </script>
    
</body>
</html>